<!--<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://www.yihulian.com/tags" prefix="html" %>
<%@taglib prefix="pager" tagdir="/WEB-INF/tags" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@ taglib prefix='fmt' uri="http://java.sun.com/jsp/jstl/fmt" %>-->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<link href="css/wxmenuList/common.css" type="text/css" rel="stylesheet">
<!-- 自定义样式 -->
<link rel="stylesheet" href="css/wxmenuList/wx-custom.css">
<link rel="stylesheet" href="css/wxmenuList/index.css">
<link rel="stylesheet" href="css/wxmenuList/bootstrap.min.css">
<link rel="stylesheet" href="css/wxmenuList/font-awesome.min.css">

<!-- 自定义菜单排序 -->
<script src="js/wxmenuList/Sortable.js"></script>
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<input type="hidden" name="name" id="name" value="公众号名称">
<div class="jzy_desktop_panel" style="padding:70px;padding-top:50px">
	<!-- 自定义菜单 -->
	<div class="custom-menu-edit-con" style="padding:0;">
		<div class="hbox">
			<div class="inner-left">
				<div class="custom-menu-view-con">
					<div class="custom-menu-view">
						<div class="custom-menu-view__title">公众号名称</div>
						<div class="custom-menu-view__body">
							<div class="weixin-msg-list">
								<ul class="msg-con"></ul>
							</div>
						</div>
						<div id="menuMain" class="custom-menu-view__footer">
							<div class="custom-menu-view__footer__left"></div>
							<div class="custom-menu-view__footer__right"></div>
						</div>
					</div>
				</div>
			</div>
			<div class="inner-right">
				<div class="cm-edit-after">
					<div class="cm-edit-right-header b-b">
						<span id="cm-tit"></span>
						<a id="delMenu" class="pull-right" href="javascript:;">删除菜单</a>
					</div>
					<form class="form-horizontal wrapper-md" name="custom_form">
						<div class="form-group">
							<label class="col-sm-2 control-label">菜单名称:</label>
							<div class="col-sm-5">
								<input name="custom_input_title" type="text" class="form-control" ng-model="menuname" value="" placeholder="" ng-maxlength="5">
							</div>
							<div class="col-sm-5 help-block">
								<div ng-show="custom_form.custom_input_title.$dirty&&custom_form.custom_input_title.$invalid-maxlength">字数不超过5个汉字或16个字符</div>
								<div class="font_sml" style="display: none;">若无二级菜单，可输入20个汉字或60个字符</div>
							</div>
						</div>
						<div class="form-group" id="radioGroup">
							<label class="col-sm-2 control-label">菜单内容:</label>
							<div class="col-sm-10 LebelRadio">
								<label class="checkbox-inline">
									<input type="radio" name="radioBtn" id="sendmsg" value="sendmsg"> 发送消息</label>
								<label class="checkbox-inline">
									<input type="radio" name="radioBtn" id="link" value="link"> 跳转网页</label>
								<label class="checkbox-inline">
									<input type="radio" name="radioBtn" id="xiaochengxu" value="xiaochengxu"> 跳转小程序</label>
							</div>
						</div>
					</form>
					<div class="cm-edit-content-con" id="editMsg">
						<div class="cm-edit-page">
							<div class="row">
								<label class="col-sm-6 control-label" style="text-align: left;">请选择点击事件:
								</label>
							</div>
							<div class="row">
								<label class="col-sm-2 control-label" style="text-align: left;">点击事件:
								</label>
								<div class="col-sm-5">
									<select name="click" class="form-control" id="click">
										<option value="">请选择</option>

										<!--<c:forEach var="ruleinfo" items="${requestScope.ruleinfos}" varStatus="i">
											<option value="${ruleinfo.matchContent}">${ruleinfo.ruleName}</option>
										</c:forEach>-->
										<!--<option th:each="ruleinfo,i: ${requestScope.ruleinfos}" th:value="${ruleinfo.matchContent}" -->th:text="${ruleinfo.ruleName}"></option>
									</select>
									<span class="help-block">需要自动回复配置</span>
								</div>
							</div>
						</div>
					</div>
					<div class="cm-edit-content-con" id="editPage">
						<div class="cm-edit-page">
							<div class="row">
								<label class="col-sm-6 control-label" style="text-align: left;">粉丝点击该菜单会跳转到以下链接:
								</label>
							</div>
							<div class="row">
								<label class="col-sm-2 control-label" style="text-align: left;">页面地址:
								</label>
								<div class="col-sm-5">
									<input type="text" name="url" class="form-control" placeholder="认证号才可手动输入地址">
									<span class="help-block">必填,必须是正确的URL格式</span>
								</div>
							</div>
						</div>
					</div>
					<div class="cm-edit-content-con" id="editXCX">
						<div class="cm-edit-page">
							<div class="row">
								<label class="col-sm-6 control-label" style="text-align: left;">小程序事件:
								</label>
							</div>
							<div class="row">
								<label class="col-sm-2 control-label" style="text-align: left;">小程序配置参数:
								</label>
								<div class="col-sm-5">
									<input type="text" name="Xurl" id="Xurl" class="form-control" placeholder="请输入小程序路径">
									<input type="text" name="appid"    id="appid" class="form-control" placeholder="请输入小程序appid">
									<input type="text" name="pagepath"   id="pagepath" class="form-control" placeholder="请输入小程序跳转页面">
									<span class="help-block">需要优先绑定小程序</span>
									<button type="button" id="xiao" class="btn btn-info ensure">确定</button>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="cm-edit-before">
					<h5>点击左侧菜单进行操作</h5>
				</div>
				<div class="cmcm-edit-before" id="disable" hidden>
					<h5>该菜单已被禁用</h5>
				</div>
			</div>
		</div>
	</div>
	<div class="cm-edit-footer jzy_mg_top_30">
		<button id="sortBtn" type="button" class="btn btn-default">菜单排序</button>
		<button id="sortBtnc" type="button" class="btn btn-default">完成排序</button>
		<button id="saveBtns" type="button" class="btn btn-info1">保存并发布</button>
	</div>
	<div id="reminderModal" class="modal fade" tabindex="-1" role="dialog">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span>×</span>
					</button>
					<h4 class="modal-title">
						温馨提示
					</h4>
				</div>
				<div class="modal-body">
					<h5>添加子菜单后，一级菜单的内容将被清除。确定添加子菜单？</h5>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-info reminder">确定</button>
					<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
				</div>
			</div>
		</div>
	</div>

	<div id="abnormalModal" class="modal fade" tabindex="-1" role="dialog">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span>×</span>
					</button>
					<h4 class="modal-title">
						温馨提示
					</h4>
				</div>
				<div class="modal-body">
					<h5>数据异常</h5>
				</div>
				<div class="modal-footer">
					<!-- <button type="button" class="btn btn-info reminder">确定</button> -->
					<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
				</div>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
	var menuList;
	 $.ajax({
         type: "POST",
         url: "http://wxtest.1hulian.cn/menuApi/indexApi.do",//这里是需要请求的路径
         data : {name:"前海志东"},
         crossDomain: true,
         //dataType: 'jsonp',
		 async:false,
         success : function(ruselt) {

             var result = JSON.parse(ruselt);

             var  ruleinfos=result.ruleinfos;
             console.log(result)
             menuList=result.button;
             console.log(menuList.length)
             var html='';
             for(var i=0;i<ruleinfos.length;i++){
                 html+='<option value="'+ruleinfos[i].matchContent+'">'+ruleinfos[i].ruleName+'</option>';
             }
             $("#click").append(html);
         }
     });
</script>
<script type="text/javascript">


    $(function(){
        var mId=null;
        //显示自定义按钮组
     //   var obj=${requestScope.menuList};
		var obj=menuList;
        var tempObj={};//存储HTML对象
       // var button=obj.button;//一级菜单
        var button=  menuList
        //显示异常
        if(obj.errcode){
            $('#abnormalModal').modal('show');
        }
        //一级菜单对象
        function parents(param){
            this.name=param;
            this.sub_button=[];
        }
        //二级菜单对象
        function subs(param){
            this.name=param;
        }
        var objp=new parents();
        var objs=new subs();
        var ix=button.length;//一级菜单数量
        var menu='<div class="custom-menu-view__menu"><div class="text-ellipsis"></div></div>';
        var customBtns=$('.custom-menu-view__footer__right');
        if(button.length>0){
            showMenu();
            //$('.cm-edit-before').hide();
            $('.cm-edit-after').hide();
        }else{
            addMenu();
            $('.cm-edit-before').siblings().hide();
        }
        //显示第一级菜单
        function showMenu(){
            if(button.length==1){
                appendMenu(button.length);
                showBtn();
                $('.custom-menu-view__menu').css({
                    width:'50%',
                });
            }
            if(button.length==2){
                appendMenu(button.length);
                showBtn();
                $('.custom-menu-view__menu').css({
                    width:'33.3333%',
                });
            }
            if(button.length==3){
                appendMenu(button.length);
                showBtn();
                $('.custom-menu-view__menu').css({
                    width:'33.3333%',
                });
            }
            for(var b=0;b<button.length;b++){
                $('.custom-menu-view__menu')[b].setAttribute('alt',b);
            }
        }
        //显示子菜单
        function showBtn(){
            for(var i=0;i<button.length;i++){
                var text=button[i].name;
                var list=document.createElement('ul');
                list.className="custom-menu-view__menu__sub";
                $('.custom-menu-view__menu')[i].childNodes[0].innerHTML=text;
                $('.custom-menu-view__menu')[i].appendChild(list);
                for(var j=0;j<button[i].sub_button.length;j++){
                    var text=button[i].sub_button[j].name;
                    var li=document.createElement("li");
                    var tt=document.createTextNode(text);
                    var div=document.createElement('div');
                    li.className='custom-menu-view__menu__sub__add';
                    li.id='sub_'+i+'_'+j;//设置二级菜单id
                    div.className="text-ellipsis";
                    div.appendChild(tt);
                    li.appendChild(div);
                    $('.custom-menu-view__menu__sub')[i].appendChild(li);
                }
                var ulBtnL=button[i].sub_button.length;
                var iLi=document.createElement("li");
                var ii=document.createElement('i');
                var iDiv=document.createElement("div");
                ii.className="glyphicon glyphicon-plus text-info";
                iDiv.className="text-ellipsis";
                iLi.className='custom-menu-view__menu__sub__add';
                iDiv.appendChild(ii);
                iLi.appendChild(iDiv);
                if(ulBtnL<5 & i==2){
                    $('.custom-menu-view__menu__sub')[i].appendChild(iLi);
                }

            }
        }
        //显示添加的菜单
        function appendMenu(num){
            var menuDiv=document.createElement('div');
            var mDiv=document.createElement('div');
            var mi=document.createElement('i');
            mi.className='glyphicon glyphicon-plus text-info iBtn';
            mDiv.className='text-ellipsis';
            menuDiv.className='custom-menu-view__menu';
            mDiv.appendChild(mi);
            menuDiv.appendChild(mDiv)
            switch(num){
                case 1:
                    customBtns.append(menu);
                    customBtns.append(menuDiv);
                    break;
                case 2:
                    customBtns.append(menu);
                    customBtns.append(menu);
                    customBtns.append(menuDiv);
                    break;
                case 3:
                    customBtns.append(menu);
                    customBtns.append(menu);
                    customBtns.append(menu);
                    break;
            }
        }
        //初始化菜单按钮
        function addMenu(){
            var menuI='<div class="custom-menu-view__menu"><div class="text-ellipsis"><i class="glyphicon glyphicon-plus text-info iBtn"></i></div></div>';
            var sortIndex=true;
            customBtns.append(menuI);
            var customFirstBtns=$('.custom-menu-view__menu');
            var firstBtnsLength=customFirstBtns.length;
            if(firstBtnsLength<=1){
                customFirstBtns.css({
                    width:'100%',
                })
            }
        }
        //添加菜单按钮
        var customEl='<div class="custom-menu-view__menu"><div class="text-ellipsis">新建菜单</div></div>'
        var customUl='<ul class="custom-menu-view__menu__sub"><li class="custom-menu-view__menu__sub__add"><div class="text-ellipsis"><i class="glyphicon glyphicon-plus text-info"></i></div></li></ul>';
        var customLi='<li class="custom-menu-view__menu__sub__add"><div class="text-ellipsis">新建子菜单</div></li>';
        $('.iBtn').parent().on('click',function(){
            var num=$('.custom-menu-view__footer__right').find('.custom-menu-view__menu').length;
            var ulNum=$(this).parents('.custom-menu-view__menu').prev().find('.custom-menu-view__menu__sub').length;
            ix++;
            if(ix<4){
                $(this).parent().before(customEl);
                $(this).parent().prev().append(customUl);

                $('.custom-menu-view__footer__right').find('.subbutton__actived').removeClass('subbutton__actived');
                $(this).parent().prev().addClass('subbutton__actived');

                //一级菜单列数
                var buttonIndex=$(this).parents('.custom-menu-view__menu').index()-1;
                $('.custom-menu-view__menu').eq(buttonIndex).on('click',(function(buttonIndex){
                    var txt=$('.custom-menu-view__menu').eq(buttonIndex).text();
                    setMenuText(txt);
                })(buttonIndex));

                if(ix==1){
                    $('.custom-menu-view__menu').css({
                        width:'50%'
                    });
                    $('.custom-menu-view__menu')[ix-1].setAttribute('alt',ix-1);
                }
                if(ix==2){
                    $('.custom-menu-view__menu').css({
                        width:'33.3333%'
                    });
                    $('.custom-menu-view__menu')[ix-1].setAttribute('alt',ix-1);
                }
                var divText=$(this).parent().prev().find('.text-ellipsis').text();
                button.push(new parents(divText));
            }
            if(ix==3){
                $(this).parents('.custom-menu-view__menu').remove();
                $(this).parent().append(customUl);
                $('.custom-menu-view__menu')[ix-1].setAttribute('alt',ix-1);
            }
            $('.cm-edit-after').show().siblings().hide();

        });
        var setMenuText=function(value){
            setInput(value);
            updateTit(value);

            radios[0].checked=true;
            $('#editMsg').show();
            $('#editPage').hide();
            $('#editXCX').hide();
            $('.msg-context__item').show();
            $('.msg-template').hide();
        }
        function setSubText(){
            var actived=$('.custom-menu-view__menu__sub__add').hasClass('subbutton__actived');
            var activedTxt=$('.subbutton__actived').text();
            if(actived){
                setInput(activedTxt);
                updateTit(activedTxt);

                radios[0].checked=true;
                $('#editMsg').show();
                $('#editPage').hide();
                $('#editXCX').hide();
                $('.msg-context__item').show();
                $('.msg-template').hide();
            }
        }
        //添加子菜单
        var colIndex;//一级菜单列数
        customBtns.on('click','li>.text-ellipsis>i',function(){
            //绑定删除事件
            $('.msg-panel__del').on('click',delClick);
            colIndex=$(this).parents('.custom-menu-view__menu').attr('alt');
            var liNum=$(this).parents('.custom-menu-view__menu').find('li').length;

            if(liNum<=1){
                $('#reminderModal').modal('show');
            }else{
                if(liNum<6){
                    $(this).parent().parent().before(customLi);
                    setLiId();
                }
                if(liNum==5){
                    $(this).parents('li').remove();
                }
            }
            $('#radioGroup').show();
            setSubText()
        });
        //确定添加子菜单事件
        $('.reminder').click(function(){
            var ul=$('.custom-menu-view__menu')[colIndex].getElementsByTagName('ul')[0];
            var li=document.createElement('li');
            var div=document.createElement('div');
            var Text=document.createTextNode('新建子菜单');
            li.className="custom-menu-view__menu__sub__add";
            div.className="text-ellipsis";
            div.appendChild(Text);
            li.appendChild(div);
            ul.insertBefore(li,ul.childNodes[0]);
            setLiId();
            delete button[colIndex].type;
            delete button[colIndex].key;
            delete button[colIndex].url;
            $('#reminderModal').modal('hide');

            setSubText()
        });
        //对新添加二级菜单添加id
        function setLiId(){
            var prev=$('.custom-menu-view__menu')[colIndex].getElementsByTagName('i')[0].parentNode.parentNode.previousSibling;
            var divText=prev.childNodes[0].innerHTML;
            button[colIndex].sub_button.push(new subs(divText));
            var id=button[colIndex].sub_button.length-1;
            prev.setAttribute('id','sub_'+colIndex+'_'+id);

            $('.custom-menu-view__footer__right').find('.subbutton__actived').removeClass('subbutton__actived');
            $('.custom-menu-view__menu').eq(colIndex).find('i').parent().parent().prev().addClass('subbutton__actived');
        }
        //点击菜单
        customBtns.on('click','.text-ellipsis',function(){
            $('.cm-edit-after').show().siblings().hide();
            if($(this).parent().attr('id') || $(this).parent().attr('alt')){
                $(this).parents('.custom-menu-view__footer__right').find('.subbutton__actived').removeClass('subbutton__actived');
                $(this).parent().addClass('subbutton__actived');
            }
            //一级菜单列数
            var buttonIndex=$(this).parents('.custom-menu-view__menu').index();
            if($('.msg-context__item').is(':hidden')){
                $('.msg-template').show();
            }else if($('.msg-context__item').is(':visible')){
                $('.msg-template').hide();
            }
            //点击在一级菜单上
            if($(this).parent().attr('alt')){

                if($('.custom-menu-view__menu').hasClass('subbutton__actived')){
                    var current=$('.subbutton__actived');
                    var alt=current.attr('alt');
                    if(alt!="2"){
                        $('#disable').show().siblings().hide();
                        return;
                    }
                    var lis=current.find('ul>li');
                    setInput(button[buttonIndex].name);
                    updateTit(button[buttonIndex].name);
                    if(lis.length>1){
                        $('#editMsg').hide();
                        $('#editPage').hide();
                        $('#editXCX').hide();
                        $('#radioGroup').hide();
                    }else{
                        if(button[buttonIndex].type=='click'){
                            radios[0].checked=true;
                            $('#editMsg').show();
                            $('#editPage').hide();
                            $('#editXCX').hide();
                            $('#radioGroup').show();

                            //拿key换取mediaId
                            subKey=button[buttonIndex].key;
                            $('.msg-template').html($('#'+subKey).html());
                            delElement();
                            //绑定删除事件
                            $('.msg-panel__del').on('click',delClick);

                            $('.msg-template').html(tempObj[button[buttonIndex].key]);
                        }else if(button[buttonIndex].type=='view'){
                            $('input[name="url"]').val(button[buttonIndex].url);
                            radios[1].checked=true;
                            $('#editMsg').hide();
                            $('#editPage').show();
                            $('#editXCX').hide();
                            $('#radioGroup').show();
                        }else if(button[buttonIndex].type=='miniprogram'){
                            $('input[name="xurl"]').val(button[buttonIndex].url);
                            $('input[name="appid"]').val(button[buttonIndex].appid);
                            $('input[name="pagepath"]').val(button[buttonIndex].pagepath);
                            radios[2].checked=true;
                            $('#editMsg').hide();
                            $('#editPage').hide();
                            $('#editXCX').show();
                            $('#radioGroup').show();
                        }else if(!button[buttonIndex].type){
                            radios[0].checked=true;
                            $('#editMsg').show();
                            $('#editPage').hide();
                            $('#radioGroup').show();
                        }
                        if(button[buttonIndex].key){
                            $('.msg-context__item').hide();
                            $('.msg-template').show();
                        }else{
                            $('.msg-context__item').show();
                            $('.msg-template').hide();
                        }
                    }

                }

            }
            //点击在二级菜单上
            if($(this).parent().attr('id')){
                var substr=$(this).parent().attr('id').lastIndexOf('_')+1;
                var num= $(this).parent().attr('id').substring(4,5);
                if(num!=2){
                    $('#disable').show().siblings().hide();
                    return;
                }
                var subIndex=$(this).parent().attr('id').substring(substr);
                var subText=button[buttonIndex].sub_button[subIndex].name;
                var subUrl=button[buttonIndex].sub_button[subIndex].url;
                var subType=button[buttonIndex].sub_button[subIndex].type;
                var subKey=button[buttonIndex].sub_button[subIndex].key;
                var Xurl=button[buttonIndex].sub_button[subIndex].Xurl;
                var appid=button[buttonIndex].sub_button[subIndex].appid;
                var pagepath=button[buttonIndex].sub_button[subIndex].pagepath;

                if($('.custom-menu-view__menu__sub__add').hasClass('subbutton__actived')){
                    setInput(subText);
                    updateTit(subText);
                    $('#radioGroup').show();
                    if(subType=='click'){
                        $('#editMsg').show();
                        $('#editPage').hide();
                        $('#editXCX').hide();
                        $("#sendmsg").parent().attr("class", "checked");
                        $("#link").parent().attr("class","");
                        $("#xiaochengxu").parent().attr("class","");
                        $("#sendmsg").parent().attr("class", "checked");
                        $('select[name="click"]').find('option[value="'+subKey+'"]').attr("selected",true);
                    }else if(subType=='view'){
                        $('#editMsg').hide();
                        $('#editPage').show();
                        $('#editXCX').hide();
                        $("#sendmsg").parent().attr("class","");
                        $("#link").parent().attr("class", "checked");
                        $("#xiaochengxu").parent().attr("class","");
                        $('input[name="url"]').val(subUrl);
                    }else if(subType=='miniprogram'){
                        $('#editMsg').hide();
                        $('#editPage').hide();
                        $('#editXCX').show();
                        $("#sendmsg").parent().attr("class","");
                        $("#link").parent().attr("class","");
                        $("#xiaochengxu").parent().attr("class", "checked");
                        $('input[name="Xurl"]').val(Xurl);
                        $('input[name="appid"]').val(appid);
                        $('input[name="pagepath"]').val(pagepath);
                    } else if(!subType){
                        radios[0].checked=true;
                        $('#editMsg').show();
                        $('#editPage').hide();
                        $('input[name="url"]').val('');
                    }
                    if(subKey){
                        $('.msg-context__item').hide();
                        $('.msg-template').show();
                    }else{
                        $('.msg-context__item').show();
                        $('.msg-template').hide();
                    }
                }
            }
            //绑定删除事件
            $('.msg-panel__del').on('click',delClick);
        });
        //设置右边input的value
        function setInput(val){
            $('input[name="custom_input_title"]').val(val);
        }
        //实时更新右侧顶部标题
        function updateTit(text){
            $('#cm-tit').html(text);
        }
        //保存右侧菜单名称
        $('input[name="custom_input_title"]').keyup(function(){
            var val=$(this).val();
            var current=$('.subbutton__actived');
            if($('.custom-menu-view__menu__sub__add').hasClass('subbutton__actived')){
                var row=current.attr('id').lastIndexOf('_')-1;
                var col=current.attr('id').lastIndexOf('_')+1;
                var sub_row=current.attr('id').substr(row,1);
                var sub_col=current.attr('id').substring(col);
                button[sub_row].sub_button[sub_col].name=val;
                current.find('.text-ellipsis').text(val);
                updateTit(val);
            }else if($('.custom-menu-view__menu').hasClass('subbutton__actived')){
                var alt=current.attr('alt');
                button[alt].name=val;
                current.children('.text-ellipsis').text(val);
                updateTit(val)
            }

        });
        //保存右侧跳转页面的url
        $('input[name="url"]').keyup(function(){
            var val=$(this).val();
            var current=$('.subbutton__actived');
            if($('.custom-menu-view__menu__sub__add').hasClass('subbutton__actived')){
                var row=current.attr('id').lastIndexOf('_')-1;
                var col=current.attr('id').lastIndexOf('_')+1;
                var sub_row=current.attr('id').substr(row,1);
                var sub_col=current.attr('id').substring(col);
                button[sub_row].sub_button[sub_col].url=val;
                button[sub_row].sub_button[sub_col].type='view';
                delete button[sub_row].sub_button[sub_col].key;
                delete button[sub_row].sub_button[sub_col].appid;
                delete button[sub_row].sub_button[sub_col].pagepath;
                $('input[name="click"]').val('');
                if(button[sub_row].sub_button[sub_col].url==''){
                    delete button[sub_row].sub_button[sub_col].url;
                }
            }else if($('.custom-menu-view__menu').hasClass('subbutton__actived')){
                var alt=current.attr('alt');
                button[alt].url=val;
                button[alt].type='view';
                delete button[alt].key;
                delete button[alt].appid;
                delete button[alt].pagepath;
                $('input[name="click"]').val('');
                if(button[alt].url==''){
                    delete button[alt].url;
                }
            }
        });
        //保存右侧跳转页面的click
        $('select[name="click"]').blur(function(){
            var val=$(this).val();
            if(val==''){
                return ;
            }
            var current=$('.subbutton__actived');
            var input_name=$('input[name="custom_input_title"]');
            if($('.custom-menu-view__menu__sub__add').hasClass('subbutton__actived')){
                var row=current.attr('id').lastIndexOf('_')-1;
                var col=current.attr('id').lastIndexOf('_')+1;
                var sub_row=current.attr('id').substr(row,1);
                var sub_col=current.attr('id').substring(col);
                button[sub_row].sub_button[sub_col].name=input_name.val();
                button[sub_row].sub_button[sub_col].key=val;
                button[sub_row].sub_button[sub_col].type='click';
                delete button[sub_row].sub_button[sub_col].url;
                delete button[sub_row].sub_button[sub_col].appid;
                delete button[sub_row].sub_button[sub_col].pagepath;
                $('input[name="url"]').val('');
            }else if($('.custom-menu-view__menu').hasClass('subbutton__actived')){
                var alt=current.attr('alt');
                button[alt].key=val;
                button[alt].type='click';
                delete button[alt].url;
                delete button[alt].appid;
                delete button[alt].pagepath;
                $('input[name="url"]').val('');
            }
        });
        //保存右侧跳转页面的小程序
        $('#xiao').on('click',function(){
            var xurl=$("#Xurl").val();
            var appid=$("#appid").val();
            var pagepath=$("#pagepath").val();
            if(xurl==''||appid==''||pagepath==''){
                alert("内容不能为空")
                return ;
            }
            var current=$('.subbutton__actived');
            var input_name=$('input[name="custom_input_title"]');
            if($('.custom-menu-view__menu__sub__add').hasClass('subbutton__actived')){
                var row=current.attr('id').lastIndexOf('_')-1;
                var col=current.attr('id').lastIndexOf('_')+1;
                var sub_row=current.attr('id').substr(row,1);
                var sub_col=current.attr('id').substring(col);
                button[sub_row].sub_button[sub_col].name=input_name.val();
                button[sub_row].sub_button[sub_col].url=xurl;
                button[sub_row].sub_button[sub_col].appid=appid;
                button[sub_row].sub_button[sub_col].pagepath=pagepath;
                button[sub_row].sub_button[sub_col].type='miniprogram';
                delete button[sub_row].sub_button[sub_col].key;
                $('input[name="url"]').val('');
            }else if($('.custom-menu-view__menu').hasClass('subbutton__actived')){
                var alt=current.attr('alt');
                button[alt].url=xurl;
                button[sub_row].sub_button[sub_col].appid=appid;
                button[sub_row].sub_button[sub_col].pagepath=pagepath;
                button[alt].type='miniprogram';
                delete button[alt].key;
                $('input[name="url"]').val('');
            }
        });
        //自定义菜单排序
        $('#sortBtnc').click(function(){
            var btnWrap=$('.custom-menu-view__footer__right').find('.custom-menu-view__menu');
            var numBtn=btnWrap.length;
            $('#sortBtnc').hide();
            $('#sortBtn').show();
            $('#saveBtns').show();
            $('.iBtn').parents('.custom-menu-view__menu').show();
            $('.cm-edit-before').show().siblings().hide();
            for(var n=0;n<numBtn;n++){
                var ul=btnWrap[n].getElementsByTagName('ul')[0];
                if(ul){
                    (function(n){
                        ul.setAttribute('id','menuStage_2_'+(n+1));
                        sortIndex=false;
                        sortable(n+1,sortIndex);
                        //$('.text-ellipsis>i').parents('li').show();
                        var num = $('.custom-menu-view__menu__sub').eq(n).find('li').length;
                        if(num!=5 & n==2){
                            var i_el='<li class="custom-menu-view__menu__sub__add"><div class="text-ellipsis"><i class="glyphicon glyphicon-plus text-info"></i></div></li>';
                            $('.custom-menu-view__menu__sub').eq(n).append(i_el);
                        }
                    })(n);
                    if(ix==1){
                        $('.custom-menu-view__menu').css({
                            width:'50%'
                        })
                    }
                    if(ix==2){
                        $('.custom-menu-view__menu').css({
                            width:'33.3333%'
                        });
                    }

                }
            }
        });
        $('#sortBtn').click(function(){
            var btnWrap=$('.custom-menu-view__footer__right').find('.custom-menu-view__menu');
            var numBtn=btnWrap.length;
            $('#sortBtnc').show();
            $('#sortBtn').hide();
            $('#saveBtns').hide();
            $('.iBtn').parents('.custom-menu-view__menu').hide();
            $('.cm-drag-before').show().siblings().hide();
            for(var n=0;n<numBtn;n++){
                var ul=btnWrap[n].getElementsByTagName('ul')[0];
                if(ul){
                    (function(n){
                        ul.setAttribute('id','menuStage_2_'+(n+1));
                        sortIndex=true;
                        sortable(n+1,sortIndex);
                        $('.text-ellipsis>i').parents('li').remove();
                    })(n);
                    if(ix==1){
                        $('.custom-menu-view__menu').css({
                            width:'100%'
                        })
                    }
                    if(ix==2){
                        $('.custom-menu-view__menu').css({
                            width:'50%'
                        });
                    }

                }
            }

        });
        function sortable(m,sortIndex){
            if(sortIndex){
                Sortable.create(document.getElementById('menuStage_2_'+m), {
                    animation: 300, //动画参数
                    disabled: false,
                });
            }else{
                var el = document.getElementById('menuStage_2_'+m);
                var sortable = Sortable.create(el,{
                    disabled: true,
                });
                sortable.destroy();

            }
        }

        //tab切换
        $('.msg-panel__tab>li').click(function(){
            $('.msg-panel__tab>li').eq($(this).index()).addClass('on').siblings().removeClass('on');
            $('.msg-panel__context').eq($(this).index()).removeClass('hide').siblings().addClass('hide')
        });

        //菜单内容跳转
        var radios=document.getElementsByName("radioBtn");
        for ( var n= 0; n < radios.length; n++) {
            radios[n].index=n;
            radios[n].onchange=function(){
                if (radios[this.index].checked==true) {
                    if(radios[this.index].value=='link'){
                        $('#editMsg').hide();
                        $('#editPage').show();
                        $('#editXCX').hide();
                    }else if(radios[this.index].value=='xiaochengxu'){
                        $('#editMsg').hide();
                        $('#editPage').hide();
                        $('#editXCX').show();
                    }else{
                        $('#editMsg').show();
                        $('#editPage').hide();
                        $('#editXCX').hide();
                    }
                }
            };
        }
        /**id为selectModal弹框选中遮罩层
         $('#selectModal .modal-body .panel').click(function(){
            $(this).find('.mask-bg').show();
            $(this).parent().siblings().find('.mask-bg').hide();
            mId=$(this).parent().attr('id');
        });
         //id为selectModal弹框确定按钮事件
         $('#selectModal .ensure').on('click',function(){
            var msgTemp=$('.msg-template');
            var delEl='<span class="msg-panel__del del-tuwen">删除</span>';
            if(mId!=null){
                msgTemp.html($('#'+mId).html());
                delElement();
                msgTemp.find('.mask-bg').hide();
                msgTemp.siblings().hide();
                msgTemp.show();
                tempObj[mId]=msgTemp.html();
                //绑定删除事件
                $('.msg-panel__del').on('click',delClick);
                var current=$('.subbutton__actived');
                var input_name=$('input[name="custom_input_title"]');
                if($('.custom-menu-view__menu__sub__add').hasClass('subbutton__actived')){
                    var row=current.attr('id').lastIndexOf('_')-1;
                    var col=current.attr('id').lastIndexOf('_')+1;
                    var sub_row=current.attr('id').substr(row,1);
                    var sub_col=current.attr('id').substring(col);

                    button[sub_row].sub_button[sub_col].name=input_name.val();
                    button[sub_row].sub_button[sub_col].key=mId;
                    button[sub_row].sub_button[sub_col].type='click';
                }else if($('.custom-menu-view__menu').hasClass('subbutton__actived')){
                    var alt=current.attr('alt');
                    button[alt].name=input_name.val();
                    button[alt].key=mId;
                    button[alt].type='click';
                }

            }
            $('#selectModal').modal('hide');
        });
         */
        //type为click时添加删除按钮元素
        function delElement(){
            var msgTemp=$('.msg-template');
            var delEl='<span class="msg-panel__del del-tuwen">删除</span>';
            msgTemp.append(delEl);
            if(msgTemp.find('span').length==0){
                msgTemp.append(delEl);
            }
        };
        var delClick=function(){
            $('.msg-template').empty();
            $('.msg-context__item').show();
            $('.mask-bg').hide();

            var current=$('.subbutton__actived');
            if($('.custom-menu-view__menu__sub__add').hasClass('subbutton__actived')){
                var row=current.attr('id').lastIndexOf('_')-1;
                var col=current.attr('id').lastIndexOf('_')+1;
                var sub_row=current.attr('id').substr(row,1);
                var sub_col=current.attr('id').substring(col);
                delete button[sub_row].sub_button[sub_col].key;
            }else if($('.custom-menu-view__menu').hasClass('subbutton__actived')){
                var alt=current.attr('alt');
                delete button[alt].key;
            }
        };
        //删除菜单按钮
        $('#delMenu').click(function(){
            var is_Actived=$('.custom-menu-view__menu').hasClass('subbutton__actived');//一级菜单选择项
            var is_actived=$('.custom-menu-view__menu__sub__add').hasClass('subbutton__actived');//二级菜单选中项
            var rowIndex=0;
            var colIndex=0;
            if(is_Actived){
                rowIndex=$('.subbutton__actived').attr('alt');
                $('.subbutton__actived').remove()
                delete button[rowIndex];
            }else if(is_actived){
                rowIndex=$('.subbutton__actived').attr('id').substr($('.subbutton__actived').attr('id').lastIndexOf('_')-1,1);
                colIndex=$('.subbutton__actived').attr('id').substr($('.subbutton__actived').attr('id').lastIndexOf('_')+1,1);
                var num=$('.subbutton__actived').parent().find("li").length;
                if(num==5){
                    var hes=$('.subbutton__actived').parent().find("li").find("i").length;
                    if(hes==0){
                        $('.subbutton__actived').parent().append("<li><div class=\"text-ellipsis\"><i class=\"glyphicon glyphicon-plus text-info\"></i></div></li>")
                    }
                }
                $('.subbutton__actived').remove();
                delete button[rowIndex].sub_button[colIndex];
            }
            //清除右边数据
            $('.cm-edit-before').show().siblings().hide();
            updateTit('');
            setInput('');
            $('input[name="url"]').val('');
            $('.msg-template').children().remove();
            $('.msg-context__item').show();
        })
        //保存自定义菜单
        $('#saveBtns').click(function(){
            var activeBtn=$('.custom-menu-view__menu').hasClass('subbutton__actived');
            var activeSubBtn=$('.custom-menu-view__menu__sub__add').hasClass('subbutton__actived');
            var rowIndex=0;
            var colIndex=0;
            var url=null;
            var strRegex ='(https?|ftp|file)://[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]';
            var re=new RegExp(strRegex);

            if(activeBtn){
                rowIndex=$('.subbutton__actived').attr('alt');
            }else if(activeSubBtn){
                rowIndex=$('.subbutton__actived').attr('id').substr($('.subbutton__actived').attr('id').lastIndexOf('_')-1,1);
                colIndex=$('.subbutton__actived').attr('id').substr($('.subbutton__actived').attr('id').lastIndexOf('_')+1,1);
            }

            if(activeBtn){
                //一级菜单
                if(button[rowIndex].hasOwnProperty('url')){
                    url=button[rowIndex].url;
                    if (!re.test(url)) {
                        alert("请输入正确的url地址！");
                        return false;
                    }
                    saveAjax();
                }else if(button[rowIndex].hasOwnProperty('key')){
                    saveAjax();
                }else{
                    alert("菜单内容不能为空！");
                }
            }else if(activeSubBtn){
                //二级菜单
                if(button[rowIndex].sub_button[colIndex].hasOwnProperty('url')){
                    url=button[rowIndex].sub_button[colIndex].url;
                    if (!re.test(url)) {
                        alert("请输入正确的url地址！");
                        return false;
                    }
                    saveAjax();
                }else if(button[rowIndex].sub_button[colIndex].hasOwnProperty('key')){
                    //layer.msg("请选择图文信息！");
                    saveAjax();
                }else{
                    alert("菜单内容不能为空！");
                }
            }else{
                saveAjax();
            }
        });
        //保存
        function saveAjax(){
            // alert(JSON.stringify(obj))
            var name=$("#name").val();
            var data={
                "name" :name, //先将对象转换为字符串再传给后台
                "menu" :JSON.stringify(obj) ,//先将对象转换为字符串再传给后台

            }
            $.ajax({
                type: "POST",
                url: "wxtest.1hulian.cn/menuApi/doMenuList.do",//这里是需要请求的路径
                data : data,
                success : function(ruselt) {
                    var obj = JSON.parse(ruselt);
                    if (obj.msg==0) {
                        alert("保存成功");
                        location.reload();
                    } else {
                        alert(obj.msg);
                    }
                }
            });
        }
    });
    function popup(text){
        var id = 'jzy_alert'+Math.floor(Math.random()*1000+1);
        $('body').append('<div class="'+id+' popupDom"><div class="popup  text-default"></div></div>');
        $('.'+id+" .popup").html(text);
        $('.'+id).stop().animate({
            "top": "0px"
        }, 400);
        setTimeout(function() {
            $('.'+id).stop().animate({
                "top": "-51px"
            }, 400);
        }, 2000);
    }
</script>
<script type="text/javascript">
    $(document).bind('cbox_closed', function () {
        location.href = "${pageContext.request.contextPath}/${sessionScope.menuItemMap.menuItem.menuUrl}?menuId=${sessionScope.menuItemMap.menuItem.menuId}";
    });
</script>